<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
import * as echarts from 'echarts';

const pageTabsNav = ['按时间统计','按煤种统计','按供应商统计']
const pageTabsIndex = ref(0)
function clickPageTabs(index:number){
    pageTabsIndex.value = index
    if(pageTabsIndex.value == 0)
    {
        if(timeTabsIndex.value == 0)
        {
            //initChart(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], [4000,5000,4500,3000,4200,4800,5320,4000,5000,4500,3000,4200],'入厂煤量统计')
            getStaticByDateData([yearAgo,today], 1, '入厂煤量统计')
        }
        else if(timeTabsIndex.value == 1){
            // const array1To30: string[] = [];
            // for (let i = 1; i <= 30; i++) {
            //     array1To30.push(`${i}`);
            // }
            // initChart(array1To30,[4000,5000,4500,3000,4200,4800,5320,4000,5000,4500,3000,4200,4000,5000,4500,3000,4200,4800,5320,4000,5000,4500,3000,4200,5320,4000,5000,4500,3000,4200],'入厂煤量统计')
            getStaticByDateData([monthAgo,today], 2, '入厂煤量统计')
        }
    }
    else if(pageTabsIndex.value == 1){
        //initChart(['褐煤','平煤','气煤','平煤','无烟煤','平煤','平煤','中煤','平准二煤'],[4000,5000,4500,3000,4200,4800,5320,4000,5000],'本月入厂煤量统计-按煤质分类')
        getStaticByBunkerType(BunkerTypeTime.value, 0, '本月入厂煤量统计-按煤质分类')
    }
    else if(pageTabsIndex.value == 2){
        //initChart(['华安','可门','辽东','归口','海宁','翼翼们','刘口子','张家门','海归来'],[3000,4200,4800,4000,5000,4500,5320,4000,5000],'本月入厂煤量统计-按供应商分类')
        getStaticBySupplier(SupplierTime.value, 0, '本月入厂煤量统计-按供应商分类')
    }  
    
}

const timeTabsNav = ['近12个月','近30天']
const timeTabsIndex = ref(0)
function clickTimeTabs(index:number){
    timeTabsIndex.value = index
    if(timeTabsIndex.value == 0)
    {
        //initChart(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], [4000,5000,4500,3000,4200,4800,5320,4000,5000,4500,3000,4200],'入厂煤量统计')
        getStaticByDateData([oneYearAgo,today], 1, '入厂煤量统计')
    }
    else if(timeTabsIndex.value == 1){
        const array1To30: string[] = [];
        for (let i = 1; i <= 30; i++) {
            array1To30.push(`${i}`);
        }
        //initChart(array1To30,[4000,5000,4500,3000,4200,4800,5320,4000,5000,4500,3000,4200,4000,5000,4500,3000,4200,4800,5320,4000,5000,4500,3000,4200,5320,4000,5000,4500,3000,4200],'入厂煤量统计')
        getStaticByDateData([monthAgo,today], 2, '入厂煤量统计')
    }
    
}

//图表初始化
function initChart(xData: string[], yData: number[], title?:string, lineData?: number[]){
    //const xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    //const yData = [4000,5000,4500,3000,4200,4800,5320,4000,5000,4500,3000,4200]
    const barChart = echarts.init(document.getElementById('statsChart'));
    // 绘制图表
    barChart.setOption({
        title: {
            text: title,
            left: 'center',
            top: '3%'
        },
        grid: {
            left: 80,
            top: '15%',
            right: 80,
            bottom: '6%'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            top: '3%',
            right: '1%',
            data: ['实际来煤', '计划来煤']
        },
        xAxis: [
            {
                type: 'category',
                data: xData,
                axisPointer: {
                    type: 'shadow'
                },
                
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                },
                minInterval: 100
            },
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                },
                minInterval: 100
            }
        ],
        series: [
            {
                name: '实际来煤',
                type: 'bar',
                tooltip: {},
                barWidth: '20%',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#317DF7'
                        },
                        {
                            offset: 1,
                            color: '#88B4FA'
                        }
                    ])
                },
                data: yData
            },
            {
                name: '计划来煤',
                type: 'line',
                yAxisIndex: 1,
                colro:['#F49F17'],
                itemStyle: {
                    color: '#F49F17'
                },
                data: lineData
            }
        ]
    });
}

// 获取当天日期
const timeDate = new Date();
const today = timeDate.toISOString().split('T')[0]

// 获取一个月前的日期
const oneMonthAgo = new Date();
oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
const monthAgo = oneMonthAgo.toISOString().split('T')[0];

// 获取一年前的日期
const oneYearAgo = new Date();
oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
oneYearAgo.setMonth(oneYearAgo.getMonth() + 1);
const yearAgo = oneYearAgo.toISOString().split('T')[0];


//const BunkerTypeTime = ref('')



// api
import { GetBunkerInStaticByDate, GetBunkerInStaticByBunkerType, GetBunkerInStaticBySupplier } from "@/api";

const cData = ref<any>([])
const cTableData = ref<any>([])
const getStaticByDateData = (timeData:any, dateType:number, title:string) => {
    console.log('timeData--------------', timeData)
    GetBunkerInStaticByDate({
        timeData: timeData,
        dateType: dateType //1-按月，2-按天
    }).then(res => {
        console.log('chartData--------------',res.data)
        cData.value = res.data
        //console.log('chartData--------------',cData.value.timeData)
        initChart(cData.value.timeData, cData.value.actureBunkerData,title, cData.value.planBunkerData)
        cTableData.value = []
        for (const i in cData.value.timeData) {
            let element = {
                timeData: cData.value.timeData[i],
                actureBunkerData: cData.value.actureBunkerData[i],
                planBunkerData: cData.value.planBunkerData[i],
                bunkerPercentData: cData.value.bunkerPercentData[i]
            }
            cTableData.value.push(element)
        }
    })
}

// 煤种
const BunkerTypeTime = ref([monthAgo,today])

const getStaticByBunkerType = (timeData:any, dateType:number, title:string) => {
    console.log('timeData--------------', BunkerTypeTime.value)
    GetBunkerInStaticByBunkerType({
        timeData: timeData,
        dateType: dateType //1-按月，2-按天
    }).then(res => {
        console.log('chartData--------------',res.data)
        cData.value = res.data
        //console.log('chartData--------------',cData.value.timeData)
        initChart(cData.value.bunkerTypeData, cData.value.actureBunkerData,title, cData.value.planBunkerData)
        cTableData.value = []
        for (const i in cData.value.bunkerTypeData) {
            let element = {
                bunkerTypeData: cData.value.bunkerTypeData[i],
                actureBunkerData: cData.value.actureBunkerData[i],
                planBunkerData: cData.value.planBunkerData[i],
            }
            cTableData.value.push(element)
        }
        console.log(cTableData)
    })
}

const changeBunkerTypeTime = () => {
    getStaticByBunkerType(BunkerTypeTime.value, 0 , '本月入厂煤量统计-按煤质分类')
}

// 供应商
const SupplierTime = ref([monthAgo,today])

const getStaticBySupplier = (timeData:any, dateType:number, title:string) => {
    //console.log('timeData--------------', BunkerTypeTime.value)
    GetBunkerInStaticBySupplier({
        timeData: timeData,
        dateType: dateType //1-按月，2-按天
    }).then(res => {
        console.log('chartData--------------',res.data)
        cData.value = res.data
        //console.log('chartData--------------',cData.value.timeData)
        initChart(cData.value.supplierNameData, cData.value.actureBunkerData,title, cData.value.planBunkerData)
        //cTableData.value = cData.value.bunkerInStaticBySupplierDetails

    })
}
const changeSupplierTime = () => {
    getStaticBySupplier(SupplierTime.value, 0 , '本月入厂煤量统计-按供应商分类')
}

onMounted(() => {
    //initChart(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], [4000,5000,4500,3000,4200,4800,5320,4000,5000,4500,3000,4200],'入厂煤量统计')
    
    getStaticByDateData([yearAgo,today], 1, '入厂煤量统计')
});

const monthVal = ref('')
</script>
<template>
<div class="flex_bg">

    <ul class="page_tabs">
        <li v-for="(item,index) in pageTabsNav" @click="clickPageTabs(index)" :class="pageTabsIndex == index?'hover':''">{{ item }}</li>
    </ul>
    <div style="position: relative;">
        <ul class="time_tabs" v-if="pageTabsIndex == 0">
            <li v-for="(item,index) in timeTabsNav" @click="clickTimeTabs(index)" :class="timeTabsIndex == index?'hover':''">{{ item }}</li>
        </ul>
        <div class="date_month" v-if="pageTabsIndex == 1">
            <!-- <el-date-picker
            v-model="monthVal"
            type="month"
            placeholder="选择日期/月份"
            /> -->
            <el-date-picker
                v-model="BunkerTypeTime"
                type="daterange"
                range-separator="To"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :clearable="false"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width: 260px;"
                @change="changeBunkerTypeTime"
            />
        </div>
        <div class="date_month" v-if="pageTabsIndex == 2">
            <el-date-picker
                v-model="SupplierTime"
                type="daterange"
                range-separator="To"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :clearable="false"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width: 260px;"
                @change="changeSupplierTime"
            />
        </div>

        <div class="chart_main" id="statsChart"></div>
    </div>
    <div v-if="pageTabsIndex == 0" class="table_info mt15">
        <table>
            <tr>
                <th>日期</th>
                <th>计划来煤(万吨)</th>
                <th>实际来煤(万吨)</th>
                <th>去年同期增加</th>
            </tr>
            <tr v-for="item in cTableData">
                <th>{{ item.timeData }}</th>
                <td>{{ item.planBunkerData }}</td>
                <td>{{ item.actureBunkerData }}</td>
                <td>{{ item.bunkerPercentData }}</td>
            </tr>
        </table>
        <!-- <table>
            <tr>
                <th>日期</th>
                <th v-for="item in cData.timeData">{{ item }}</th>
            </tr>
            <tr>
                <th>计划来煤(万吨)</th>
                <td v-for="item in cData.planBunkerData">{{ item }}</td>
            </tr>
            <tr>
                <th>实际来煤(万吨)</th>
                <td v-for="item in cData.actureBunkerData">{{ item }}</td>
            </tr>
            <tr>
                <th>去年同期增加</th>
                <td v-for="item in cData.bunkerPercentData">
                    <p v-if="item > 0" class="green">{{ item }}</p>
                    <p v-else-if="item < 0" class="yellow">{{ item }}</p>
                    <p v-else>{{ item }}</p>
                </td>
            </tr>
        </table> -->
    </div>

    <div v-if="pageTabsIndex == 1" class="table_info mt15">
        <table>
            <tr>
                <th>煤种</th>
                <th>存量</th>
                <th>计划来煤</th>
                <th>实际来煤</th>
                <th>偏差</th>
            </tr>
            <tr v-for="item in cTableData">
                <td>{{ item.bunkerTypeData }}</td>
                <td>{{ item.actureBunkerData }}</td>
                <td>{{ item.planBunkerData }}</td>
                <td>{{ item.actureBunkerData }}</td>
                <td>
                    <p :class="item.planBunkerData > item.actureBunkerData?'yellow':'green'"> 
                        <span v-if="item.planBunkerData < item.actureBunkerData">+</span>
                        <span v-if="item.planBunkerData > item.actureBunkerData">-</span>
                        {{ item.planBunkerData - item.actureBunkerData }}
                    </p>
                </td>
            </tr>
            
        </table>
    </div>

    <div v-if="pageTabsIndex == 2" class=" mt15">
        <el-table :data="cData.bunkerInStaticBySupplierDetails" 
            header-row-class-name="table_header_row" 
            header-cell-class-name="table_header_cell"
            border show-summary size="large" style="width: 100%" >
            <el-table-column prop="supplierName" label="供应商名称" align="center" />
            <el-table-column label="计划" align="center">
                <el-table-column prop="planInTime" label="到厂时间" align="center" />
                <el-table-column prop="planWeight" label="来煤重量" align="center" />
            </el-table-column>
            <el-table-column label="实际" align="center">
                <el-table-column prop="actureInTime" label="到厂时间" align="center" />
            <el-table-column prop="acturenWeight" label="来煤重量" align="center" />
            </el-table-column>
            <el-table-column label="偏差" align="center">
                <el-table-column prop="" label="到厂时间" align="center" >
                    <template #default="scope">
                        <p v-if="scope.row.diffDayNum == 100000">{{ scope.row.arrivedTimeOffset }}</p>
                        <p v-else>
                            <span :class="scope.row.diffDayNum > 0?'red':'green'">{{ scope.row.arrivedTimeOffset }}</span>
                        </p>
                    </template>
                </el-table-column>
                <el-table-column prop="diffWeight" label="来煤重量" align="center" />
            </el-table-column>
        </el-table>
        <!-- <table>
            <tr>
                <th rowspan="2">供应商名称</th>
                <th colspan="2">计划</th>
                <th colspan="2">实际</th>
                <th colspan="2">偏差</th>
            </tr>
            <tr>
                <th>到厂时间</th>
                <th>来煤重量</th>
                <th>到厂时间</th>
                <th>来煤重量</th>
                <th>到厂时间</th>
                <th>来煤重量</th>
            </tr>
            <tr v-for="item in cData.bunkerInStaticBySupplierDetails">
                <td>{{ item.supplierName }}</td>
                <td>{{ item.planInTime }}</td>
                <td>{{ item.planWeight }}</td>
                <td>{{ item.actureInTime }}</td>
                <td>{{ item.acturenWeight }}</td>
                <td><p :class="item.diffDayNum > 0?'red':''">{{ item.diffDayNum }}</p></td>
                <td><p :class="item.diffWeight > 0?'green':'yellow'">{{ item.diffWeight }}</p></td>
            </tr>
            <tr class="table_bg">
                <td>合计</td>
                <td></td>
                <td>29087</td>
                <td></td>
                <td>29087</td>
                <td></td>
                <td></td>
            </tr>
        </table> -->
    </div>

</div>
</template>
<style>
.table_header_cell{
    background: #CCDDF9 !important;
    color:#3D4755;
}
.el-table__footer-wrapper tfoot td.el-table__cell{
    background: #9BA2AC;
    color:#fff;
    font-weight: bold;
}
</style>
<style scoped lang="scss">

.chart_main{
    width: 100%;
    height: 500px;
}
.date_month{
    position: absolute;
    left: 20px;
    top:15px;
    z-index: 9;
}
.time_tabs{
    position: absolute;
    left: 20px;
    top:15px;
    z-index: 9;
    display: flex;
    align-items: center;
    li {
        width: 100px;
        line-height: 32px;
        text-align: center;
        background: url('../../assets/img/ico_btn1.png') no-repeat;
        background-size: 100% 100%;
        font-weight: 400;
        font-size: 15px;
        color: #2565C8;
        cursor: pointer;
        border-radius: 20px;
        margin-right: 10px;

        &:hover {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        &.hover {
            background: url('../../assets/img/ico_btn1a.png') no-repeat;
            background-size: 100% 100%;
            color: #fff;
        }
    }
}

</style>